import { Input, Select } from "antd";
import { useComponentStore } from "../../../stores/components";
import { useEffect, useState } from "react";

export interface ShowMessageConfig {
  type: 'showMessage'
  config: {
    type: 'success' | 'error'
    text: string
  }
}

export interface ShowMessageProps {
  value?: ShowMessageConfig['config']
  defalutValue?: ShowMessageConfig['config']
  onChange?: (config: ShowMessageConfig) => void
}

const ShowMessage = (props: ShowMessageProps) => {
  const { value: val, onChange, defalutValue } = props

  const { curComponentId } = useComponentStore()

  const [type, setType] = useState<'success' | 'error'>(defalutValue?.type || 'success')
  const [text, setText] = useState<string>(defalutValue?.text || '')

  useEffect(() => {
    if(val) {
      setType(val.type)
      setText(val.text)
    }
  }, [val])

  const messageTypeChange = (value: 'success' | 'error') => {
    if(!curComponentId) return

    setType(value)

    onChange?.({
      type: 'showMessage',
      config: {
        type: value,
        text
      }
    })
  }

  const messageTextChange = (value: string) => {
    if(!curComponentId) return

    setText(value)

    onChange?.({
      type: 'showMessage',
      config: {
        type,
        text: value
      }
    })
  }

  return <div className="mt-[40px]">
    <div className="flex items-center gap-[10px]">
      <div>类型:</div>
      <Select
        style={{width: 500, height: 50}}
        options={[
          { label: '成功', value: 'success' },
          { label: '失败', value: 'error' }
        ]}
        onChange={(value) => { messageTypeChange(value) }}
        value={type}
      />
    </div>
    <div className="flex items-center gap-[10px] mt-[40px]">
      <div>文本:</div>
      <Input
        style={{width: 500, height: 50}}
        onChange={(e) => { messageTextChange(e.target.value) }}
        value={text}
      />
    </div>
  </div>
}

export default ShowMessage